<template>
  <view class="container">
    <!-- 头像 -->
    <view class="avatar-section" @click="changeAvatar">
      <image class="avatar" :src="userInfo.avatar" mode="aspectFill" />
    </view>

    <!-- 用户信息列表 -->
    <view class="info-list">
      <view class="info-item">
        <text class="label">用户名</text>
        <input 
          class="value" 
          :disabled="!isEditing" 
          v-model="userInfo.username" 
          placeholder="请输入用户名" 
        />
      </view>
      
      <view class="info-item">
        <text class="label">学校</text>
        <input 
          class="value" 
          :disabled="!isEditing" 
          v-model="userInfo.school" 
          placeholder="请输入学校" 
        />
      </view>
      
      <view class="info-item">
        <text class="label">学号</text>
        <input 
          class="value" 
          :disabled="!isEditing" 
          v-model="userInfo.studentId" 
          placeholder="请输入学号" 
        />
      </view>
      
      <view class="info-item">
        <text class="label">姓名</text>
        <input 
          class="value" 
          :disabled="!isEditing" 
          v-model="userInfo.name" 
          placeholder="请输入姓名" 
        />
      </view>
      
      <view class="info-item">
        <text class="label">邮箱</text>
        <input 
          class="value" 
          :disabled="!isEditing" 
          v-model="userInfo.email" 
          placeholder="请输入邮箱" 
        />
      </view>
    </view>

    <!-- 操作按钮 -->
    <view class="button-group">
      <button v-if="!isEditing" class="edit-button" @click="startEdit">编辑</button>
      <button v-else class="save-button" @click="saveInfo">保存</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'

// 定义响应式数据
const isEditing = ref(false)

const userInfo = reactive({
  avatar: 'https://placehold.co/100x100?text=头像',
  username: '张三',
  school: '某某大学',
  studentId: '20210001',
  name: '张三',
  email: 'zhangsan@example.com'
})

const originalUserInfo = ref({})

// 编辑功能
const startEdit = () => {
  // 保存原始数据以便取消时恢复
  originalUserInfo.value = JSON.parse(JSON.stringify(userInfo))
  isEditing.value = true
}

// 保存功能
const saveInfo = () => {
  // 这里应该添加保存到服务器的逻辑
  console.log('保存用户信息:', userInfo)
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
  isEditing.value = false
}

// 更改头像
const changeAvatar = () => {
  if (!isEditing.value) {
    uni.showToast({
      title: '请先点击编辑按钮',
      icon: 'none'
    })
    return
  }
  
  uni.showActionSheet({
    itemList: ['拍照', '从相册选择'],
    success: (res) => {
      if (res.tapIndex === 0) {
        // 拍照
        chooseImage('camera')
      } else if (res.tapIndex === 1) {
        // 从相册选择
        chooseImage('album')
      }
    },
    fail: (err) => {
      console.error('选择操作失败:', err)
    }
  })
}

// 选择图片
const chooseImage = (sourceType: 'camera' | 'album') => {
  uni.chooseImage({
    count: 1,
    sourceType: [sourceType],
    // 限制只能选择静态图片格式
    extension: ['jpg', 'jpeg', 'png'],
    success: (res) => {
      const tempFilePath = res.tempFilePaths[0]
      // 检查文件扩展名确保是允许的静态图片格式
      const allowedExtensions = ['.jpg', '.jpeg', '.png']
      const fileExtension = tempFilePath.substring(tempFilePath.lastIndexOf('.')).toLowerCase()
      
      if (!allowedExtensions.includes(fileExtension)) {
        uni.showToast({
          title: '仅支持 JPG、PNG、JPEG 格式',
          icon: 'none'
        })
        return
      }
      
      // 实际项目中这里应该上传到服务器并获取新的URL
      // 这里我们直接使用本地路径作为示例
      userInfo.avatar = tempFilePath
      uni.showToast({
        title: '头像已更新',
        icon: 'success'
      })
    },
    fail: (err) => {
      console.error('选择图片失败:', err)
      uni.showToast({
        title: '选择图片失败',
        icon: 'none'
      })
    }
  })
}
</script>

<style scoped>
.container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.avatar-section {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
  position: relative;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.info-list {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 0 15px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.info-item {
  display: flex;
  align-items: center;
  padding: 15px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  width: 80px;
  font-size: 16px;
  color: #333;
  font-weight: bold;
}

.value {
  flex: 1;
  font-size: 16px;
  color: #666;
  padding: 5px 10px;
  border-radius: 5px;
}

.value[disabled] {
  background-color: transparent;
  color: #333;
}

.button-group {
  margin-top: 30px;
  padding: 0 20px;
}

.edit-button, .save-button {
  width: 100%;
  height: 45px;
  line-height: 45px;
  border-radius: 25px;
  font-size: 16px;
  font-weight: bold;
}

.edit-button {
  background-color: #007AFF;
  color: white;
  border: none;
}

.save-button {
  background-color: #4CAF50;
  color: white;
  border: none;
}
</style>